<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="root">

    </div>
</body>
<script src="../react@17.js"></script>
<script src="../react-dom@17.js"></script>
<script src="../babel.js"></script>
<script type="text/babel">

    // 获取商品列表
    // 创建xhr实例
    let xhr = new XMLHttpRequest();
    //设置请求方式请求地址
    console.log(xhr)
    xhr.open("get", "https://apif.java.crmeb.net/api/front/index/product/1/?page=1&limit=10");
    // 发送请求
    xhr.send();
    // 监听状态
    xhr.onreadystatechange = () => {
        // 5 0 1 2 3 4;
        // 0:表示xhr实例已创建但还未调用open方法
        // 1：open方法但是还未调用send方法
        // 2: 发送请求了但服务端还未响应
        // 3: 服务端还未完全响应完数据
        // 4： 服务端完成响应
        if (xhr.readyState === 4) {
            // 请求成功获取请求到的数据
            let data = xhr.response;
            data = JSON.parse(data);
            let { list } = data.data;
            // 渲染app
            ReactDOM.render(<App list={list} />, document.getElementById("root"))
        }
    }

    function App(props) {
        let { list } = props;
        return (
            <div>
                {
                    list.map((item, indx) => {
                        return <Goods key={item.id} item={item}></Goods>
                    })
                }
            </div>
        )
    }

    function Goods(props) {
        let { item } = props;
        console.log(item)
        return (
            <div>
                <img src={item.image} alt="" style={{ width: "200px" }} />
                <h5>{item.storeName}</h5>
                <p>{item.otPrice}</p>
                <p>{item.price}</p>
            </div>
        )
    }
</script>

</html>